쌓임 맥락

❓질문

쌓임 맥락(stacking context)에 대해서 설명해주세요

💡 조사하기전 내가 알고 있던 내용

쌓임 맥락이라는 단어를 진짜로 처음 들어봤다. 그렇기에 검색해보니 Mdn사이트에 개념에 대한 설명이 있길래 보니 CSS의 z index관련된 개념인거같았다.

🏫 정리한 내용

쌓임 맥락은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다. - MDN

이해한 바로는 우리의 웹 페이지는 2D평면도로만 생각하여선 안되고 이를 가상의 Z축 즉 어떤 순서로 보일지를 결정하는 과정에서 하나의 쌓임 맥락이 생기고 그 쌓임 맥락안에서 어떻게 보일지 결정하는 여러가지 요소가 있는것 같다.

웹페이지에서 최초의 root 쌓임 맥락이 생기고 그 아래의 한 요소안에서 여러가지 요소가있을때 쌓임 맥락안에 또 다른 쌓임 맥락이 생기고 그런식으로 z축을 그려나가는 이해도가 아예 없다면 z-index로 z축의 우선순위를 바꿔도 원하는대로 적용되지 않을 수 있다는것이 포인트인것 같다.